<template>
    <l-page>
        <l-navbar title="询口价" />
        <view>
            <u-image :src="$imgUrl + '600/200'" width="100%" height="150"></u-image>
        </view>
        <view class="!-mt-6 panel shadow relative">
            <u-steps :current="setp">
                <u-steps-item title="填写房产信息">
                </u-steps-item>
                <u-steps-item title="付费"></u-steps-item>
                <u-steps-item title="查看评估结果"></u-steps-item>
            </u-steps>
            <view v-if="setp == 0">
                <l-select label="查询方式" class="mt-3" :list="list" v-model="test"></l-select>
                <l-select label="所在地区" class="mt-3"></l-select>
                <l-input class="mt-3">
                    <template #prefix>
                        查询关键词
                    </template>
                </l-input>
                <l-select label="楼栋" class="mt-3"></l-select>
                <l-select label="房号" class="mt-3"></l-select>
                <l-input class="mt-3" placeholder="m²" v-model="val">

                    <template #prefix>
                        建筑面积
                    </template>
                </l-input>
                {{ val }}
                <l-button class="mt-3" type="primary" @tap="setp = 1">下一步</l-button>
            </view>
            <view v-if="setp == 1">
                <view class="flex flex-col items-center">
                    <u-count-to :startVal="30" :endVal="500" fontSize="50" color="#f00"></u-count-to>
                    <view>需要支付（单位：元）</view>
                </view>
                <l-button class="mt-3" type="primary" @tap="setp = 2">付款</l-button>
            </view>
            <view v-if="setp == 2 || setp == 3">
                <view class="text-lg">您的评估结果如下</view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">物业地址：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">楼&emsp;&emsp;盘：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">建筑面积：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">楼&emsp;&emsp;龄：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">房产总价：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">房产单价：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">房产均价：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">物 业 费：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
                <view class="flex mt-3">
                    <view class="w-20 text-gray-400 text-justify">房屋用途：</view>
                    <view class="flex-1">Lorem ipsum dolor sit amet consectetur adipisicing.</view>
                </view>
            </view>
        </view>
    </l-page>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
let list = [
    {
        label: 'test1',
        value: 0
    },
    {
        label: 'test2',
        value: 1
    },
]
let test = ref(), setp = ref(0);


let a = ref();
let val = computed({
    get() {
        return a.value
    },
    set(val) {
        a.value = val
    }
})

</script>

<style scoped lang="scss"></style>